<template>
    <div>
        <u--form
            labelPosition="left"
            :model="form"
            :rules="rules"
            :labelWidth="75"
            labelAlign="right"
            ref="form"
		>
			<u-form-item
                label="收货人"
                prop="consignee"
                borderBottom
			>
				<u--input
                    v-model="form.consignee"
                    placeholder="请输入收货人"
				></u--input>
			</u-form-item>

            <u-form-item
                label="联系号码"
                prop="mobile"
                borderBottom
			>
				<u--input
					v-model="form.mobile"
                    placeholder="请输入联系号码"
				></u--input>
			</u-form-item>

            <!-- 地区 -->
            <u-form-item label='选择地区' prop='region_text' @click="RegionShow = true">
                <pick-regions :defaultRegion="LoginUser.region" @getRegion="handleGetRegion">
                    <u--input v-model="form.region_text" disabled disabledColor="#ffffff" placeholder="请选择地区"
                        border="none">
                    </u--input>
                    <u-icon slot="right" name="arrow-right">
                    </u-icon>
                </pick-regions>
                <u-icon
                    slot="right"
                    name="arrow-right"
                >
                </u-icon>
            </u-form-item>

            <u-form-item
                label="详细地址"
                prop="address"
                borderBottom
			>
				<u--input
					v-model="form.address"
                    placeholder="请输入详细地址"
				></u--input>
			</u-form-item>

            <u-form-item
                label=" "
                prop="status"
                borderBottom
			>
				<u-checkbox-group
                    v-model="checkboxValue1"
                    placement="column"
                    @change="checkboxChange"
                >
                    <u-checkbox
                        label="设置默认收货地址"
                        name="1"
                    >
                    </u-checkbox>
                </u-checkbox-group>
			</u-form-item>
		</u--form>

        <u-button type="primary" @click="add" :custom-style="addressBtn" text="添加地址"></u-button>

        <!-- 消息提示的组件 -->
		<u-toast ref="notice"></u-toast>
    </div>
</template>
<script>
// 引用地区选择组件
import pickRegions from '@/components/pick-regions/pick-regions.vue'
export default {
    components:{
        pickRegions
    },
    onShow()
    {
        let LoginUser = uni.getStorageSync('LoginUser')

        this.LoginUser = LoginUser

        this.form.consignee = this.LoginUser.nickname ? this.LoginUser.nickname : ''

        this.form.region_text = this.LoginUser.region_text ? this.LoginUser.region_text : ''

        this.RegionCode = this.LoginUser.district

        // 让表单绑定的验证规则生效
        this.$refs.form.setRules(this.rules)
    },
    data() {
        return {
            rules:{
                consignee:[{
                    required: true,
                    message: '请输入收货人',
                    trigger: ['change','blur'],
                }],
                mobile:[
                    {
                        required: true, 
                        message: '请输入手机号',
                        trigger: ['change','blur'],
                    },
                    {
                        // 自定义验证函数，见上说明
                        validator: (rule, value, callback) => {
                            // 上面有说，返回true表示校验通过，返回false表示不通过
                            // uni.$u.test.mobile()就是返回true或者false的
                            return uni.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        // 触发器可以同时用blur和change
                        trigger: ['change','blur'],
                    }
                ],
                region_text: [
                    {
                        required: true,
                        message: '请选择地区',
                        trigger: ['change','blur'],
                    }
                ],

                address: [
                    {
                        required: true,
                        message: '请输入详情地址',
                        trigger: ['change','blur'],
                    }
                ],

            },
            checkboxValue1:[],
            addressBtn:{
                top:'3em',
                width: '100%',
                backgroundColor: '#4ea9f5',
                borderRadius: '0px',
                color: '#fff',
            },
            RegionShow: false,
            RegionCode: null,
            form:{
                consignee:'',
                mobile:'',
                address:'',
                region_text:'',
                region:[]
            },
            LoginUser:null
        }
    },
    methods: {
        checkboxChange(item)
        {
            console.log(item)
        },
        handleGetRegion(item)
        {
            
            // 获取到选中的省，市，区
            let [province,city,district] = item

            // 定义字符串 => 存选中的地区文本
            let region_text = ''

            // 存选中的地区码

            let region = []

            let code = null

            if(province)
            {
                region_text += province.name + '-'
                region.push(province.name)
                code = province.code
            }

            if(city)
            {
                region_text += city.name + '-'
                region.push(city.name)
                code = city.code
            }

            if(district)
            {
                region_text += district.name
                region.push(district.name)
                code = district.code
            }

            this.form.region_text = region_text

            this.form.region = region

            this.RegionCode = code
            
        },
        add()
        {
            this.$refs.form.validate().then(async res => {


                let data = {
                    consignee:this.form.consignee,
                    mobile:this.form.mobile,
                    address:this.form.address,
                    userid:this.LoginUser.id,
                }

                if(this.checkboxValue1)
                {
                    data.status = this.checkboxValue1[0]
                }


                if(this.RegionCode)
                {
                    data.code = this.RegionCode
                }

                let result = await this.$u.api.user.Add(data)
                

                if(result.code == 1)
                {
                    this.$refs.notice.show({
                        type:'success',
                        message:result.msg,
                        icon:true,
                        complete:() => {

                            this.$u.route({
                                url:'/pages/address/address',
                                type:'navigateTo'
                            })
                        }
                    })
                }else{
                    this.$refs.notice.show({
                        type:'error',
                        message:result.msg,
                        icon:true,
                    })
                }
                

            }).catch(errors => {
                console.log(errors)
                this.$refs.notice.show({
                    type:'error',
                    message:errors[0].message,
                    icon:true
                })
			})
        }
    },
}
</script>
<style>

</style>